@import '../../../../../theme/variable/breakpoint';
.widget-picker {
  min-height: 360px;
  @apply w-[48px];
  .widget-wrapper {
    position: relative;
    .item {
      position: relative;
      .inner {
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .group-popup {
    position: relative;
    max-height: 60vh;
    overflow: auto;
  }
  .widget-wrapper,
  .group-popup,
  .widget-popup {
    @apply rounded-[8px];
  }
  .widget-popup {
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    @apply pointer-events-none;
    &[data-popper-placement] {
      display: flex;
      opacity: 1;
      @apply pointer-events-auto;
    }
    .hover-show {
      transform: scale(0.8);
      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
  &:not(.show) {
    opacity: 0;
    position: fixed;
    @apply pointer-events-none;
  }
}
